<template>
  <div>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="image-label">音频标题</div>
      </el-col>
      <el-col :span="21">
        <KindEditor :content.sync="field.fieldValue.title" editor-type="Input" width="100%"/>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <div v-for="(path, index) in field.fieldValue.paths" :key="index" style="height: 60px; ">
          <audio controls :src="path" style="width: 90%" preload/>
          <div class="el-icon-delete audio-icon-delete"
               @click="handleDelete(index)"></div>
      </div>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="24">
        <el-upload
          :on-error="handleUploadError" accept=".mp3"
          :on-success="handleUploadSuccess"
          :show-file-list=false
          :action="'/pmph/action/audio/upload?uploadPath=' + uploadPath"
          multiple>
          <el-button size="small" style="width: 180px;" type="primary">上传音频</el-button>
        </el-upload>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'KAudioField',
  props: {
    field: {},
    fieldIndex: '',
    uploadPath: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
    }
  },
  methods: {
    handleDelete(index) {
      this.$emit('del', this.fieldIndex, index)
    },
    handleUploadError(err, file, fileList) {
      this.$message.error("音频上传失败")
    },
    handleUploadSuccess(response) {
      this.$emit("upload", this.fieldIndex, response.path)
    }
  },
  created() {
  }
}
</script>
<style scoped>

.image-label {
  height: 40px;
  line-height: 40px;
  text-align: right;
  margin-right: 10px;
}

.full-width {
  width: 100%;
}

.bottom-space {
  margin-bottom: 10px;
}

.audio-icon-delete {
  cursor: pointer;
  margin: 20px;
  vertical-align: bottom;
}

</style>
